<template>
  <a-breadcrumb style="font-size: 18px; font-weight: bold; margin-bottom: 20px">
    <a-breadcrumb-item style="">功能模块</a-breadcrumb-item>
    <a-breadcrumb-item style="">教室人流历史查询</a-breadcrumb-item>
  </a-breadcrumb>
  <a-button
    type="primary"
    @click="showDrawer"
    style="margin: -30px 20px 10px 10px; font-size: 20px; float: right"
  >
    查询
  </a-button>
  <a-drawer
    title="查询历史教室人流"
    :width="500"
    :visible="visible"
    :body-style="{ paddingBottom: '80px' }"
    @close="onClose"
  >
    <a-form :model="query" layout="vertical">
      <a-form-item label="查询教室">
        <a-select
          v-model:value="query.c_address"
          show-search
          style="width: 200px"
          :filter-option="filterOption"
          @focus="handleFocus"
          @blur="handleBlur"
          @change="handleChange"
        >
          <a-select-option v-for="branch in classMap" :key="branch.c_address">{{
            branch.c_address
          }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-col>
        <div class="input-group my-ctl" :gutter="16">
          <div class="input-group-prepend">
            <div class="input-group-text">生产日期区间查询</div>
          </div>
          <input
            type="date"
            class="form-control"
            style="width: 328px"
            v-model="query.a_time_start"
          />
          <div class="input-group-prepend input-group-append">
            <div class="input-group-text" style="text-align: center">至</div>
          </div>
          <input
            type="date"
            class="form-control"
            style="width: 328px"
            v-model="query.a_time_end"
          />
        </div>
      </a-col>
    </a-form>

    <div
      :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '10px 16px',
        background: '#fff',
        textAlign: 'right',
        zIndex: 1,
      }"
    >
      <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
      <a-button type="primary" @click="purchQuery">查询</a-button>
    </div>
  </a-drawer>

  <div id="query" :style="{ width: '100%', height: '550px' }"></div>
</template>

<script setup>
// 引入echarts
import * as echarts from "echarts";
import { ref, reactive, computed, defineComponent, onMounted } from "vue";
import { useRouter } from "vue-router";
import { get, put, del, post, getBlob, tip, removeLocalToken } from "@/common";
//定义查询参数
const query = reactive({
  c_address: "",
  a_time_start: "",
  a_time_end: "",
});

const xdata = [];
const ydata = [];
const visible = ref(false);
const classMap = ref();
const showDrawer = () => {
  query.c_address = "";
  query.a_time_start = "";
  query.a_time_end = "";
  xdata.splice(0, xdata.length);
  ydata.splice(0, ydata.length);

  get("/classroom/query/classroomList").then((res) => {
    classMap.value = res.data;
  });

  visible.value = true;
};
const onClose = () => {
  visible.value = false;
};

const purchQuery = () => {
  get("/classroom/query", query).then((res) => {
    visible.value = false;
    for (let obj in res.data) {
      xdata.push(res.data[obj]["a_time"]);
      ydata.push(res.data[obj]["a_number"]);
    }
    tip.success("查询完成！");
    mc();
  });
};

const mc = () => {
  // 需要获取到element,所以是onMounted的Hook
  let myChart = echarts.init(document.getElementById("query"));
  // 绘制图表
  myChart.setOption({
    xAxis: {
      axisLabel: {
        // interval: "auto",
        interval: 50, // 只显示最大和最小坐标
        showMinLabel: true, // 显示最小刻度标签
        showMaxLabel: true, // 显示最大刻度标签
      },
      data: xdata,
    },
    yAxis: {},
    series: [
      {
        name: "人数",
        type: "line",
        data: ydata,
      },
    ],
  });
  window.onresize = function () {
    // 自适应大小
    myChart.resize();
  };
};
</script>

